
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			ul{
				width: 300px;
				border: 1px solid #ccc;
				border-radius: 4px;
				margin: auto;
				overflow: hidden;
				text-align: center;
			}
			li{
				float: left;
				width: 33.33%;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>七彩虹</li>
			<li>微星</li>
			<li>华硕</li>
			<li>影驰</li>
			<li>AMD</li>
			<li>耕升</li>
			<li>磐雷</li>
			<li>磐雷1</li>
			<li>磐雷2</li>
			<li>磐雷3</li>
			<li>磐雷4</li>
			<li>磐雷5</li>
			<li>磐雷6</li>
			<li>其他品牌</li>
		</ul>
		<div style="text-align: center;">
			<button>更多品牌</button>
		</div>
		<script src="../jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("button").click(function(){
				$(this).html($(this).html()=="更多品牌"?"精简显示":"更多品牌");
				$("li:gt(5):not(li:last)").toggle();
			})			
		</script>
	</body>
</html>
